@import './assets/fun.less';
@hotColor:#ff0000;
@defaultColor:#6a6a6a;


html, body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }
body {
    background-color: #fff;
}

.vux-header.header{
    @headerHeight:94/2px;
    width:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:100;
    background-color:#FFF;
    height: @headerHeight;
    box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.08);
    .vux-header-title-area{
        height:@headerHeight;
        text-align: center;
        img{
            width: 100%;
            margin-top: 10px;
            max-width:291px/2;
        }
    }
    .rightMenu{
        width: 52px/2;
        height: 35px/2;
        // background: url(./assets/menu.png) no-repeat center center;
        // background-size: cover;
        margin-top: 2px;
        span{
            display: block;
            height: 1px;
            background: #bbb;
            position: relative;
            .AutoTransition(all .5s ease);
            &:first-child{
                top: 6px;
            }
            &:last-child{
                top: 10px;
            }
        }
        &.active{
            span{
                &:nth-child(2){
                    .AutoTransform(rotate(45deg));
                    top: 7px;
                }
                &:first-child{
                    display: none;
                }
                &:last-child{
                    .AutoTransform(rotate(-45deg));
                    top: 7px;
                }
            }
        }
    }
}
.menus{
    position: fixed;
    top: 70px;
    background: #fff;
    right: 6px;
    padding:0 20px;
    box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    &:after{
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border:20px solid #fff;
        border-top-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
        top: -34px;
        right: 10px;
    }
    ul,li{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
        width: 115px;
        a{
            font-size: 15px;
            display: block;
            position: relative;
            text-align: center;
            color: #6a6a6a;
            padding:10px 0;
            b{
                color: @hotColor;
            }
            &:after{
                content: "";
                position: absolute;
                width: 100%;
                height: 1px;
                background: #f0f0f0;
                left: 0;
                bottom: 0;

            }
        }
        &:last-child a:after{
            display: none;
        }
    }
}


.swiperWrap{
    position: relative;
}
.swiperbg{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25px;
    background: url(./assets/swiperBg.png) no-repeat center center;
    background-size: cover;
}
.vux-slider.indexSwiper{
    img{
        width: 100%;

    }
    .swiperDoc.vux-indicator{
        a{
            margin:0 10px;
        }
        .vux-icon-dot{
            background-color: #8d8f8f !important;
            &.active{
                background-color: #fff !important;
            }
        }
    }
}
.section{
    text-align: center;
    padding: 25px 0;
    border-bottom: 1px solid #e6e7eb;
    a{
    color: #6a6a6a;
    }
    .cirarc{
        width: 110px/2;
        height: 110px/2;
        // border-radius: 50%;
        // border: 1px solid #e6e6e6;
        margin:0 auto;
	    margin-bottom: 9px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .vux-flexbox-item{
	    font-size:9px;
	    text-align: center;
	    line-height: 100%;
	    font-weight: 400;
	    color: #6a6a6a;
	    p{
		font-size: 5px;
		text-transform:Uppercase;
		padding-bottom: 6px;
		position: relative;
		&:after{
			position: absolute;
			content: "";
			width: 22px;
			height: 1px;
			background: #6a6a6a;
			left: 50%;
			bottom: 0px;
			margin-left: -11px;
		}
	    }




	&:active,&:hover{
		color: @hotColor;
		div,p{
			color: @hotColor;
			&:after{
				background:@hotColor;
			}
		}
	}



	}

}
.sectionAbout{
	padding-top: 36px/2;
	.aboutText{
		padding: 20px 30px;
		font-size: 18px/2;
		color: #999;
        img{
            width: auto;
            max-width: 100%;
        }
	}

}
.mores{
	display: block;
	width: 350px/2;
	height: 75px/2;
	border-radius: 4px;
	background-color: rgb(111, 111, 111);
	box-shadow: 0px 1px 2.85px 0.15px rgba(0, 0, 0, 0.25);
	color: #fff;
	text-align: center;
	line-height: 72px/2;
	margin:0 auto;
    font-size:12px;
}
.mores:active,.mores:hover{
    background-color: #e74c3c;
}
.sectionCase{
	padding-top: 116px/2;
	.sectionTitle{
		margin-bottom: 12px;
	}
}

.sectionTitle{
	text-align: center;
	line-height: 1;
	.name{
		font-size: 33px/2;
		color: #6a6a6a;
	}
	.sname{
		font-size: 13px/2;
		color: #999;
		margin:10px 0;
	}
	.dian{
		width: 176px/2;
		margin:0 auto;
		height:1px;
		background: #999;
		position: relative;
		span{
			position: absolute;
			display: block;
			width: 30px;
			height: 10px;
			background: #fff;
			left: 50%;
			margin-left: -30/2px;
			margin-top: -5px;
			&:after{
				content: "";
				position: absolute;
				width: 4px;
				height: 4px;
				border-radius: 50%;
				background: @hotColor;
				top: 50%;
				left: 50%;
				margin-top: -2px;
				margin-left: -2px;
			}

		}
	}
}
.listWrap{
	padding:0 12px;
    margin-bottom: 15px;
	.list-item{
		margin-bottom: 25px;
		// &:nth-child(odd) .wraps{
		// 	margin-right: 6px;
		// }
		// &:nth-child(even) .wraps{
		// 	margin-left: 6px;
		// }
		.wraps{
			text-align: center;
			line-height: 1;
			img{
				width: 100%;
				margin-bottom: 5px;
			}
			.title{
				font-size: 22px/2;
				color: #3e3e3e;
			}
			p{
				margin: 0;
				padding: 0;
				font-size: 10px/2;
				color: #999;
			}
		}

	}
	.mores{
		margin: 64px/2 auto;
	}
}
.sectionNews{
    margin-top: 15px;
    .listed{
        margin-bottom: 15px;
        .weui-cell_access .weui-cell__ft:after{
            display: none;
        }
    }
	.newsHead{
		position: relative;
		img{
			width: 100%;
		}
		.content{
			position: absolute;
			width: 100%;
			text-align: center;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			.sectionTitle{
				color: #fff;
				.name{
					color: #fff;
					font-size: 68px/2;
				}
				.sname{
					margin:46px/2;
					color: #fff;
					font-size: 26px/2;
				}
				.dian{
					background: transparent;
					position: relative;
					&:after{
						position: absolute;
						content: "";
						width: 40%;
						top: 0;
						left: 0;
						height: 1px;
						background: #fff;
					}
					&:before{
						position: absolute;
						content: "";
						width: 40%;
						top: 0;
						right: 0;
						height: 1px;
						background: #fff;
					}
					span{
						background: transparent;
					}

				}
			}
		}
	}
}
.newList{
	.newslist-img{
		width: 172px/2;
	}
	.newslist-title{
		font-size: 24px/2;
		color: @hotColor;
		line-height:100%;
		p{
			color: #999;
			font-size: 13px/2;
		}
	}
    .invite-title{
        font-size: 24px/2;
        color: #343434;
    }
    .invite-desc{
        .sub-title{
            font-size: 18px/2;
            color: #e74c3c;
            // margin-bottom: 5px;
            span{
                margin-right: 1em;
            }
            .year{
                padding-left: 10px;
                background: url(./assets/times.png) no-repeat left center;
                background-size: 15px/2 auto;
            }
            .edu{
                padding-left: 12px;
                background: url(./assets/mao.png) no-repeat left center;
                background-size: 21px/2 auto;
            }
            .people{
                padding-left: 10px;
                background: url(./assets/Shape203.png) no-repeat left center;
                background-size: 17px/2 auto;
            }
        }
        .desca{
            .showLine(2);
        }
        p{
            font-size: 16px/2;
            color: #999;
        }
    }
	.vux-cell-bd{
		padding-left: 40px/2;
	}
	.newslist-desc{
		.showLine(3);
		font-size: 18px/2;
		color: #343434;
		margin-top: 6px;
	}
	.weui-cells:before,.weui-cells:after{
		display: none;
	}
	.weui-cell:before{
		right: 15px;
		height: 0px;
		background-color: transparent;
		border-color:#eee;
		border-style:dotted;
	}
	.mores{
		margin-top:10px;
	}

}
.sectionService{
	padding-top: 86px/2;
	.serviceWrap{
		padding: 30px/2;
		.serviceItem{
			width: 90%;
			height: auto;
			margin: 0 auto;
			// background-color: rgb(255, 255, 255, .4);
			box-shadow: 0px 1px 2px 0px rgba(31, 31, 31, 0.09);
			position: relative;
			text-align: center;
			overflow: hidden;
			margin-bottom: 13px;
			img{
				width: 90%;
                display: block;
                margin:0 auto;
				// opacity: .4;
				vertical-align: middle;
				// position: absolute;
				// top: 50%;
				// left: 50%;
				// transform: translate(-50%, -50%);
			}
		}
	}
}


.footer{
	padding: 54px/2 0;
    background-color:#202020;
    background-image:url();
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	.concatphone{
		text-align:center;
		img{
			width: 107px/2;
		}
	}
	.msg{
		padding:44px 30px 0;
		img{
			width: 310px/2;
			margin-bottom: 15px;
		}
		p{
			color: #e0e0e0;
			font-size: 21px/2;
			a{
				color: #e0e0e0;
			}
		}
	}

}


.topImg{
    position: relative;
    img{
        display: block;
        width: 100%;
    }
}
.abouts{
    .imgwrap{
        img{
            display: block;
            width: 100%;
        }
        &.ans{
            padding:25px 0;
        }
    }
}

.showPrice{
    text-align: center;
    margin-top: 13px;
    line-height: 1.3;
    img{
        width: 48px/2;
        // vertical-align: middle;
        margin-right: 10px;
    }
    span{
        font-size: 85px/2;
        color: @hotColor;
        margin-right: 5px;
        &.twospan{
            margin-right: 48px/2;
        }
    }
}
.tipstext{
    color: #999;
    font-size: 10px/2;
    text-align: center;
    line-height: 1.2;
}
.forms{
    margin-top: 12px;
    padding-top: 28px/2;
    padding-bottom: 44px/2;
    border-top: 1px solid #e6e7eb;
    .form{
        margin-left: 65px/2;
        margin-right: 34px/2;
        .form-control{
            margin-bottom: 46px/2;
            label{
                display: block;
                font-size: 24px/2;
                color: #999;
                margin-bottom: 16px/2;
            }
            .form-input{
                height: 58px/2;
                border:1px solid #e6e7eb;
                border-radius: 5px;
                &.notBorder{
                    border:0 none;
                }
                .inputs{
                    border:1px solid #e6e7eb;
                    border-radius: 5px;
                    height: 29px;
                    padding:0 4px;
                }
                .weui-btn_default{
                    font-size: 13px;
                    color: #fff;
                    background: #565656;
                }
            }
            .vux-popup-picker-select{
                background: url(./assets/cre.png) no-repeat 95% center;
                background-size: 18px/2 auto;
            }
            .vux-popup-picker-value{
                color: @hotColor;
                font-size:24px/2;
                padding: 0 24px/2;

            }
            .weui-cell__ft{
                display: none;
            }
            .weui-cell{
                padding: 0;
            }
        }
    }
    .saveBtnWrap{
        width: 75%;
        margin:0 auto;
        button{
            font-size: 26px/2;
            color: #fff;
            background: #e74c3c;
            &:active{
                background: #e74c3c;
                opacity: .7;
                color: #fff;
            }
        }
    }
}
.vux-popup-header-right{
    color: @hotColor !important;
}
.detailWrap{
    padding-top: 34px;
    .inviteDetail{
        background: #f4f5f9;
        padding-top: 10px;
        margin-top: 15px;
    }
    .detailTitle{
        text-align: center;
        margin-top: 15px;
        border-bottom: 1px solid #fafafa;
        padding-bottom: 10px;

        .title{
            font-size: 24px/2;
            color: @hotColor;
            padding:0 15px;
        }
        p{
            font-size: 16px/2;
            color: #aeaeae;
        }
    }
    .context{
        padding:26px 30px;
        color: #999;
        font-size: 20px/2;
        img{
            width: auto;
            height: auto !important;
            max-width: 100%;
            marign:0 auto;
        }
    }
}
.tabScaom{
    text-align: center;
    padding:10px 0;
    a{
        padding:10px 10px;
        font-size: 11px;
        color: #999;
        position: relative;
        &:after{
            content: "/";
            position: absolute;
            right: -1px;
            top: 9px;
        }
        &:last-child:after{
            display: none;
        }
        &.active{
            color: @cred;
            &:after{
                color: #999;
            }
        }
    }
}
